<template>
	<view>
	<CustomNavbar :myopacity='opacity'></CustomNavbar>
	<!-- 主体区域 -->
	<scroll-view :style="{height:(uniscreenHeight*2)+'rpx'}" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scroll="scroll">
		<view class="mytop" >
	<view class="backtop" :style="'background: url('+$globalUrl+backgroundImage+') no-repeat;background-size: cover;'"  @click.stop="a">
		<view class="Avatar_name">
			<view class="Avatar">
				<image  @click.stop="b" style="width:100%; height: 100%;border-radius: 50%;border: 1px solid white;
	box-sizing: border-box;" mode="aspectFill" :src="$globalUrl+avatarUrl"
				error="imageError"></image>
			</view>
			<view class="user_name">
				<view class="name">
					{{username}}
				</view>
				<view class="account">
					小红书号: 1234567
				</view>
			</view>
		</view>
	</view>
		</view>
		<!-- style=""  -->
	 	<view class="middle" style="box-shadow: 0px -2px 8px 8px #eee;background-color: #eee;">
			<view class="middle_data" >
				<view class="middle_left_data">
					<view class="left">
						<view>1</view>
						<view>关注</view>
					</view>
					<view class="left">
						<view>1</view>
						<view>粉丝</view>
					</view>
					<view class="left">
						<view>1</view>
						<view>获赞与收藏</view>
					</view>
				</view>
				<view class="middle_right_data">
					<view class="right">
						<view>编辑资料</view>
					</view>
					<view class="right">
						<view><span class="iconfont">&#xe660;</span></view>
					</view>
				</view>
			</view>
			<view class="middle_record" >
				<view class="record">
					<view class="iconfont">&#xe660; 购物车</view>
				</view>
				<view class="record">1</view>
				<view class="record">1</view>
			</view>
		</view>
		<view style="height:100%"></view>
	</scroll-view>
	</view>
</template>

<script>
	import { getuser,text} from "../../api/UserApi.js"
	import CustomNavbar from '../../components/CustomNavbar.vue'
	import { mapState } from 'vuex'//引入mapState
	export default {
		data() {
			return {
				//获取元素位置
				AvatarDistanceTop:[],
				//头部被卷去了多少
				volumeTop:0,
				//屏幕尺寸
				uniscreenHeight:0,
				//计算透明度
				opacity:0,
			}
		},
		onLoad() {
			const { safeAreaInsets } = uni.getSystemInfoSync();
			uni.getSystemInfo({
				success: (res) => {
					this.uniscreenHeight = res.windowHeight
				}
			})
		},
		onShow(){
			const btn = uni.createSelectorQuery().in(this);
				btn.select('.Avatar_name').boundingClientRect(AvatarDistanceTop => {
				this.AvatarDistanceTop = AvatarDistanceTop; //赋值
			}).exec()
		},
		methods: {
			scroll(e){
				//获取 屏幕边界到安全区域距离
				const top = uni.getSystemInfoSync().safeAreaInsets.top;
				if(this.opacity <= 1){
					this.opacity = (parseInt(e.detail.scrollTop)/100).toFixed(1);
				}
				if(parseInt(e.detail.scrollTop+(top+45)) == this.AvatarDistanceTop.bottom && this.opacity >= 1){
					this.opacity = 1
				}
			},
			upper(e){
				this.opacity = 0
			},
			a(){
				console.log("点击了a")
			},
			b(){
				console.log("点击了b")
			}
		},
		components:{
			/* 注册导航栏主 */
			CustomNavbar,
		},
		computed: mapState({
			// 从state中拿到数据 箭头函数可使代码更简练
			username: state => state.username,
			avatarUrl: state => state.avatarUrl,
			backgroundImage: state => state.backgroundImage,
		})
	}
</script>

<style scoped lang="scss">
.mytop{
	height: 515rpx;
	width: 100%;
	box-sizing: border-box;
 	.backtop{
		position: relative;
		top: 0;
		left: 0;
		height:515rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
		.Avatar_name{
			width: 100%;
			height: 165rpx;
			padding:0 30rpx;
			margin-top: 100rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			.Avatar{
				width: 160rpx;
				height: 160rpx;
			}
			.user_name{
				color: white;
				margin: 0 40rpx;
				.name{
					margin:0 0 20px 0;
					font-weight: bold;
					font-size: 40rpx;
				}
				.account{
					font-size: 20rpx;
				}
			}
		}
	}
 	.backtop::before{
		position: absolute;
		top: 0;
		left: 0;
		content: "";
		height:515rpx;
		width: 100%;
		display: inline-block;
		background-color: #000;
		opacity: 0.1;
	} 
}

/* 中间部分 */
.middle{
	position: relative;
	bottom: 0;
	left: 0;
	width: 100%;
	height:400rpx;
	box-sizing: border-box;
	.middle_data{
		width: 100%;
		height:60rpx;
		display: flex;
		font-size: 20rpx;
		.middle_left_data{
			width: 50%;
			height: 100%;
			color: white;
			display: flex;
			.left {
				width:100rpx;
				height:60rpx;

				text-align: center;
			}	
		}
		.middle_right_data{
			width: 50%;
			height: 100%;
			color: white;
			display: flex;
			flex-wrap: nowrap;
			justify-content: flex-end; 
			text-align: center;
			.right{
				border-radius: 50rpx 50rpx;
				height: 40rpx;
				line-height: 40rpx;
				margin-top: 10rpx;
				border: 1px solid white;
			}
			.right:nth-child(1){
				width: 150rpx;
			}
			.right:nth-child(2){
				width: 70rpx;
				margin: 10rpx 40rpx 0 20rpx;
			}
		}	
	}
	.middle_record{
		width: 100%;
		height:150rpx;
		display: flex;
		justify-content: space-around;
	    flex-wrap: wrap;
	    align-content: space-around;
		margin-top: 20rpx;
		 .record{
			color: white;
			width: 230rpx;
			height:120rpx;
			text-align: center;
			border:1px solid white;
		}
	}
}
</style>
